<template>
  <div class="product-list">
    <el-table :data="state.products" style="width: 100%" :span-method="spanMethod" border>
      <el-table-column prop="name" label="产品名称" width="160" fixed="left"> </el-table-column>
      <el-table-column prop="size" label="规格型号" width="120"> </el-table-column>
      <el-table-column prop="material" label="工艺材质" width="100"> </el-table-column>
      <el-table-column prop="unit" label="单位" width="60"> </el-table-column>
      <el-table-column prop="num" label="数量" width="60"> </el-table-column>
      <el-table-column prop="unit_price" label="单价" width="100">
        <template v-slot="{ row }">
          {{ formatAmount(row.unit_price) }}
        </template>
      </el-table-column>
      <el-table-column prop="total_price" label="总价" width="100">
        <template v-slot="{ row }">
          {{ formatAmount(row.total_price) }}
        </template>
      </el-table-column>
      <el-table-column width="240" label="设计图">
        <template v-slot="{ row }">
          <div class="image-list">
            <el-image
              v-for="image in row.files"
              :key="image.name"
              :src="getPreviewUrl(image.name)"
              style="width: 54px; height: 54px; border-radius: 4px; margin-right: 8px"
              preview-teleported
              :preview-src-list="
                  row.files.map((item: any) => {
                    return getPreviewUrl(image.name);
                  })
                "
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="200"> </el-table-column>
      <el-table-column label="制作" align="center">
        <el-table-column prop="make_work.supplier.name" label="供应商" width="150"> </el-table-column>
        <el-table-column prop="make_work.content" label="制作内容" width="120"> </el-table-column>
        <el-table-column prop="make_work.fee" label="制作费用" width="100">
          <template v-slot="{ row }">
            {{ formatAmount(row.make_work.fee) }}
          </template>
        </el-table-column>
        <el-table-column prop="make_work.estimate_start_date" label="开始时间" width="100">
          <template v-slot="{ row }">
            {{ formatDate(row.make_work.estimate_start_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="make_work.estimate_end_date" label="结束时间" width="100">
          <template v-slot="{ row }">
            {{ formatDate(row.make_work.estimate_end_date) }}
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <ViewFilesDialog ref="viewFilesDialogRef"></ViewFilesDialog>
  </div>
</template>

<script setup lang="ts" name="productList">
import { reactive, watch, ref } from 'vue';
import { getProducts } from '/@/api/project';
import { getManufacturWorkProducts } from '/@/api/manufactur-work';
import { getInstallationProducts } from '/@/api/installation';
import ViewFilesDialog from '../view-files-dialog/index.vue';
import { formatAmount, formatDate, getPreviewUrl } from '/@/utils';

const props = defineProps({
  projectId: {
    type: String,
    default: null,
  },
  manuworkId: {
    type: String,
    default: null,
  },
  installId: {
    type: String,
    default: null,
  },
});

const viewFilesDialogRef = ref<InstanceType<typeof ViewFilesDialog>>();

const state = reactive({
  products: [],
  loading: true,
});

const transformProducts = (data: any[]) => {
  const products: any[] = [];
  data.map((item: any) => {
    const files = JSON.parse(item.files);
    if (item.MakeWork) {
      item.MakeWork.forEach((work: any) => {
        products.push({
          ...item,
          files,
          make_work_num: item.MakeWork.length,
          make_work: work,
        });
      });
    }
  });

  return products;
};

const getProductsData = async () => {
  const { data } = await getProducts(props.projectId);
  state.products = transformProducts(data);
};

const getManufacturWorkProductsData = async () => {
  const { data } = await getManufacturWorkProducts(props.manuworkId);
  state.products = transformProducts(data);
};

const getInstallationProductsData = async () => {
  const { data } = await getInstallationProducts(props.installId);
  console.log('data ==>', data);
  state.products = transformProducts(data);
};

watch(
  props,
  (val) => {
    if (val.projectId) {
      getProductsData();
    } else if (val.manuworkId) {
      getManufacturWorkProductsData();
    } else if (val.installId) {
      getInstallationProductsData();
    }
  },
  {
    immediate: true,
  }
);

const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  if (columnIndex < 9 || column.property === 'handler') {
    if (row.id === state.products[rowIndex - 1]?.id) {
      return [0, 0];
    }
    return [row.make_work_num, 1];
  }
};
</script>

<style lang="scss"></style>
